<template>
  <div class="login">
    <h1>登录页面</h1>
    <div class="inner">
      <my-input
        :class="userTrue"
        v-model="username"
        placeholder="请输入用户名"
        @blur="userBlur"
        type="text"
      >
        <template #text>
          <span v-show="userTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon name="phone-o" />
        </template>
      </my-input>
      <!-- 手机号码输入框 -->

      <my-input
        :class="passTrue"
        v-model="password"
        placeholder="请输入密码"
        @blur="passBlur"
        :type="isPassOpen ? 'text' : 'password'"
      >
        <template #text>
          <span v-show="passTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon
            :name="isPassOpen ? 'eye-o' : 'closed-eye'"
            @click="isPassOpen = !isPassOpen"
          />
        </template>
      </my-input>
      <!-- 密码输入框 -->

      <button>登录</button>
    </div>
  </div>
</template>
<script>
import myInput from "../../components/myInput.vue";
import { reactive, toRefs, ref } from "vue";
export default {
  components: {
    myInput,
  },
  setup(props) {
    const username = ref("");
    const password = ref("");

    let regMobile = /^1[3,5,6,7,8,9][0-9]{9}$/;
    // 电话号码的正则

    const userTrue = ref("");

    const userBlur = () => {
      userTrue.value = regMobile.test(username.value) ? "success" : "error";
    };
    //用户失去焦点的时候调用

    const passTrue = ref("");
    // 密码输否正确
    const isPassOpen = ref(false);
    //这个变量代表密码的 眼睛图标是不是张开

    const passBlur = () => {
      passTrue.value = password.value == "" ? "error" : "success";
    };
    //只要密码不为空就是true 否则为false

    return {
      username,
      password,
      userBlur,
      passBlur,
      userTrue,
      passTrue,
      isPassOpen,
    };
  },
};
</script>
<style lang="scss">
.login {
  .inner {
    width: 340px;
    margin: 20px auto;
  }
}
</style>
